<script lang='ts' setup>
const props = defineProps({
  // form: Object,
  title: String,
  titleType: String
})


const formData = defineModel('formData')
const chooseItem = defineModel('chooseItem')

</script>

<template>
    <ul class="content-item" v-for="item in formData" :key="item.type">
      <template v-for="formItem in item.data" :key="formItem.id">
        <li v-show="chooseItem == item.type">
          <template v-if="formItem.formType == 'input'">
            <label v-if="formItem.label" for="formItem.label"></label>
            <input type="text" :name="formItem.label ? formItem.label : ''" :placeholder="formItem.placeholder">
          </template>
        </li>
      </template>
    </ul>
</template>

<style scoped lang="scss">
// form {
//   width: 40%;
//   min-width: max-content;
//   background-color: #fff;
//   // height: 30vh;
//   max-height: 600px;
//   min-height: max-content;
//   border-radius: 20px;
//   animation: showAnimate linear infinite;// 

// }

.tabs {
  border-radius: 20px 20px 0 0;
  display: flex;
  width: 100%;
  // height: max-content;
  background-color: var(--themeGreen);

  .tabs-item {
    padding: 20px 50px;
    background-color: transparent;
    border-radius: 20px 20px 0 0;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
  }

  .active {
    background-color: #fff;
    color: var(--themeGreen);

  }

}

.content-item {

  // height: max-content;
  li {
    margin: 60px auto 0;
    width: 80%;

    input {
      padding: 10px;
      height: 60px;
      width: 100%;
      border: 1px solid #ddd;
      outline: none;
      border-radius: 5px;
      box-sizing: border-box;
    }

  }

  &:last-child {
    margin-bottom: 70px;
  }

}

@keyframes showAnimate {
  0% {
    visibility: hidden;
  }

  100% {
    visibility: visible;
  }
}
</style>